<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="app-logo flex-center">
			<view class="radius-10 app-logo_shadow position-relative">
				<u--image :showLoading="true" :src="configInfo.app_icon" width="150rpx" height="150rpx"></u--image>
				<view class="app-logo_slogan">
					<u-transition :show="true" mode="fade-up">
						<text class="badge app-logo_slogan-badge">{{$t('login.welcome-text')}}</text>
					</u-transition>
				</view>
			</view>
		</view>
		<view class="form-warp m-md">
			<view class="form-warp_item p-md radius-25">
				<view class="flex-start flex-warp-nowarp">
					<view class="form-warp_item-label flex-center">
						<i-icon name="smartphone-line" :color="iconColor"></i-icon>
					</view>
					<view class="form-warp_item-inline">
						<input type="number" name="mobile" :placeholder="$t('login.input-mobile-placeholder')" v-model="mobile" class="input"/>
					</view>
				</view>
			</view>
			<view class="form-warp_item p-md radius-25 m-t-md">
				<view class="flex-between flex-warp-nowarp">
					<view class="form-warp_item-label flex-center">
						<i-icon name="lock-line" :color="iconColor"></i-icon>
					</view>
					<view class="form-warp_item-inline">
						<input type="password" name="password" :placeholder="$t('login.input-password-placeholder')" v-model="password" class="input"/>
					</view>
				</view>
			</view>

			<view class="form-warp_btns m-t-md">
				<u-button size="large" class="form-warp_btns-btn" shape="circle" :text="$t('login.login-btn')" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor,'font-size':'25px'}" :loading="loginAction" loadingText=" " :disabled="loginAction" @click="login"></u-button>
				<i-icon class="form-warp_btns-icon" name="login-circle-line"></i-icon>
			</view>

		</view>
		<view class="options" >
			<!-- #ifdef APP-PLUS -->
			<view class="flex-center m-b-md">
				<u-checkbox-group shape="circle" @change="checkboxChange">
				    <u-checkbox name="agree" activeColor="#ff5e00"></u-checkbox>
				</u-checkbox-group>
				<view class="agree-text">
					{{$t('reg.agree-tips')}}<text @click="$util.go('article/article_detail?id='+configInfo.user_agree_id)">《{{$t('reg.agree-service')}}》</text><text @click="$util.go('article/article_detail?id='+configInfo.user_privacy_id)">《{{$t('reg.agree-conceal')}}》</text>
				</view>
			</view>
			<!-- #endif -->
			<view class="options_change flex-center">
				<text class="text-secondary" @click="$util.redirectGo('auth/reg')">{{$t('login.button-reg')}}</text>
				<text class="text-secondary" @click="$util.redirectGo('auth/retrieve_pass')" v-if="configInfo.retrieve_pass">{{$t('retrieve_pass.title')}}</text>
			</view>
		</view>
		<view class="m-md" v-if="configInfo.user_weixinlogin_open == 1 && $wechat.isWechat()">
			<view class="text-center m-md text-sm text-auxiliary">
				{{$t('login.more-text')}}
			</view>
			<m-sns @callback="goNavigateBack"></m-sns>
		</view>
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	// import {User} from '../../model/user.js'
	export default {
		data() {
			return {
				mobile:'',
				password:'',
				loginAction:false,
				smscode:'',
				loading:false,
				iconColor:'#909193',
				readAgree: false,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			parentUid: state => state.config.parentUid,
		}),
		
        async onLoad(option) {
			if(option.mobile){
				this.mobile = option.mobile;
			}
        },
		
		async onShow(){
			// 判断是否登录
			if(uni.getStorageSync('authToken')){
				// 如果已登录则返回上一页
				uni.showToast({
					title: this.$t('login.on-line-tips'),
					icon: "none"
				})
				this.goNavigateBack();
			}
			
			// 获取用户信息
			let arr = ['authToken', 'userInfo']
			arr.map(key => {
				this.updateUserState({
					key : key,
					val : uni.getStorageSync(key) || ''
				})
			})
		},
		methods: {
			...mapMutations(['updateUserState']),
			...mapActions(['getUserInfo']),

			miniapp:function(){
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					console.log(loginRes.authResult);
				  }
				});
			},
			
			// 登录
			async login(){
				// #ifdef APP-PLUS
				if(!this.readAgree){
					this.$util.showToast(this.$t('reg.agree-no-tips'));
					return false;
				}
				// #endif
				this.loginAction = true
				// 构造登录数据
				let data = {
					'mobile':this.mobile,
					'password':this.password
				}
				let res = await this.$api.user.login(data);
				if(res.code == 200){
					// 登录成功
					let thos = this
					this.$util.showToast(this.$t('login.login-success'),function(){
						// console.log(res.data.token)
						thos.updateUserState({
							key : 'authToken',
							val : res.data.token
						})
						thos.getUserInfo()
						thos.$util.goNavigateBack()
					})
				}
				this.loginAction = false
			},
			
			async goSmsCode(){
				this.$util.smsCode(this.mobile,'login');
			},
			
			async goLogin(){
				let thos = this
				if(thos.loading)return false;
				thos.loading = true;
				// 构造登录数据
				let data = {
					'mobile':thos.mobile,
					'password':thos.password,
					'smscode':thos.smscode
				}
				var res = await thos.$api.user.login(data);
				if(res.code == 200){
					// 登录成功
					thos.$util.showToast(thos.$t('login.login-success'),function(){
						thos.updateUserState({
							key : 'authToken',
							val : res.data.token
						})
						thos.getUserInfo()
						thos.$util.goNavigateBack()
					})
				}
				thos.loading = false;
			},
			
			smsCallback(){
				this.getUserInfo()
				this.$util.goNavigateBack()
			},
			
			goNavigateBack(time = 1000){
				var pages = getCurrentPages(); // 获取栈实例
				if(pages.length > 1){
					setTimeout(() => {
						uni.navigateBack();
					}, time)
				}else{
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, time)
				}
			},
			
			checkboxChange(n){
				if(n[0] == 'agree'){
					this.readAgree = true;
				}else{
					this.readAgree = false;
				}
				console.log('change', n);
			}
		}
	}
</script>

<style lang="scss">
	.app-logo{
		padding-top: 200rpx;
		margin-bottom: 100rpx;
		&_shadow{
			position: relative;
			box-shadow: 0px 5px 5px #00000020;
		}
		&_slogan{
			top: -10px;
			left: 100rpx;
			position: absolute;
		}
		&_slogan-badge{
			padding: 5rpx 15rpx;
			border-radius: 10px;
			color: var(--theme-success-dark);
			background-color: var(--theme-success-light);
			border: 1px solid var(--theme-success-disabled);
			border-bottom-left-radius: 0;
		}
		/deep/ image{
			border-radius: 10px!important;
		}
	}
	
	.form-warp{
		margin: 50rpx!important;
		&_item{
			margin-top: 50rpx!important;
		}
		&_btns{
			position: relative;
			margin-top: 50rpx!important;
			overflow: hidden;
			border-radius: 25px;
		}
		&_btns-btn{
			letter-spacing: 2px;
		}
		&_btns-icon{
			position: absolute;
			font-size: 70px!important;
			top: -20px;
			right: -10px;
			color: var(--theme-line-four)!important;
			opacity: .3;
		}
	}
	
	
	// page{
	// 	background-color: var(--theme-page-bg);
	// }
	.page-content{
		position: relative;
	}
	.welcomeWechat{
		.btn{
			max-width: 300rpx;
		}
		&_btns{
			text-align: center;
		}
	}
	.wechatSheet{
		&_avatar{
			
		}
		&_username{
			margin: 10px 0;
		}
	}
	.header-logo{
		padding-top: 200rpx;
		margin-bottom: 100rpx;
	}
	.login-option{
		&_btn{
			margin-bottom: 15px;
		}
	}
	.options{
		margin-top: 50rpx;
		text-align: center;
		font-size: $contentSize;
		&_agree{
			margin-bottom: 50rpx;
		}
		&_change{
			// position: fixed;
			width: 100%;
			bottom: 44px;
			left:0;
			text{
				color: #555;
				border-right: 1px solid $incolor-3;
				padding: 0px 15rpx;
			}
			text:last-child{
				border-right: none;
			}
		}
	}
	.agree-text{
		color: #999;
		text{
			color: var(--main-color-2);
		}
	}
	
</style>
